<template>
  <div class="data-integration p-4">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="mb-6">
      <el-col :xs="24" :sm="12" :md="6">
        <ArtStatsCard
          icon="i-carbon-api"
          title="接口总数"
          :count="stats.totalApis"
          description="所有集成接口"
          iconColor="#fff"
          iconBgColor="#409EFF"
        />
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <ArtStatsCard
          icon="i-carbon-task"
          title="运行中任务"
          :count="stats.runningTasks"
          description="当前执行任务"
          iconColor="#fff"
          iconBgColor="#67C23A"
        />
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <ArtStatsCard
          icon="i-carbon-warning"
          title="异常任务"
          :count="stats.errorTasks"
          description="最近24小时"
          iconColor="#fff"
          iconBgColor="#F56C6C"
        />
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <ArtStatsCard
          icon="i-carbon-data-flow"
          title="数据流量"
          :count="stats.dataFlowValue"
          :description="`${stats.dataFlowValue}${stats.dataFlowUnit}`"
          iconColor="#fff"
          iconBgColor="#E6A23C"
        />
      </el-col>
    </el-row>

    <!-- 接口运行状态图表 -->
    <div class="api-status mb-6 bg-white p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-medium mb-4">接口运行状态</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :lg="12" class="mb-4">
          <ArtLineChart
            :data="apiStatusData.successRate"
            :xAxisData="apiStatusData.timePoints"
            title="接口成功率趋势"
            :showAreaColor="true"
          />
        </el-col>
        <el-col :xs="24" :lg="12" class="mb-4">
          <ArtBarChart
            :data="apiStatusData.taskCount"
            :xAxisData="apiStatusData.timePoints"
            title="任务执行数量"
          />
        </el-col>
      </el-row>
    </div>

    <!-- 接口信息列表 -->
    <div class="api-list mb-6 bg-white p-4 rounded-lg shadow-md">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-medium">接口信息</h2>
        <div class="flex space-x-2">
          <el-button type="primary" @click="refreshApiList">
            <div class="i-carbon-refresh mr-1"></div>刷新
          </el-button>
          <el-button type="success" @click="handleAddApi">
            <div class="i-carbon-add mr-1"></div>新增接口
          </el-button>
        </div>
      </div>
      <ArtTable :data="apiList" :loading="loading.api" :border="true" :stripe="true">
        <el-table-column prop="id" label="接口ID" width="80" />
        <el-table-column prop="name" label="接口名称" />
        <el-table-column prop="type" label="接口类型" width="120">
          <template #default="scope">
            <el-tag>{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
              {{ scope.row.status === 'active' ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastRunTime" label="最后运行时间" width="180" />
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleViewDetail(scope.row)">
              详情
            </el-button>
            <el-button type="success" size="small" @click="handleRunNow(scope.row)">
              立即执行
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </ArtTable>
    </div>

    <!-- 最近运行日志 -->
    <div class="recent-logs bg-white p-4 rounded-lg shadow-md">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-medium">最近运行日志</h2>
        <el-button type="primary" @click="refreshLogs">
          <div class="i-carbon-refresh mr-1"></div>刷新
        </el-button>
      </div>
      <ArtTable :data="logList" :loading="loading.log" :border="true" :stripe="true">
        <el-table-column prop="id" label="日志ID" width="80" />
        <el-table-column prop="apiName" label="接口名称" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="180" />
        <el-table-column prop="duration" label="耗时" width="100" />
        <el-table-column prop="dataCount" label="数据量" width="100" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleViewLog(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </ArtTable>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { useRouter } from 'vue-router'

  // 获取路由实例
  const router = useRouter()

  // 统计数据
  const stats = reactive({
    totalApis: 128,
    runningTasks: 15,
    errorTasks: 3,
    dataFlowValue: 1.5,
    dataFlowUnit: 'TB'
  })

  // 接口运行状态数据
  const apiStatusData = reactive({
    timePoints: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
    successRate: [98, 97, 99, 98, 96, 98],
    taskCount: [125, 132, 128, 135, 130, 128]
  })

  // 加载状态
  const loading = reactive({
    api: false,
    log: false
  })

  // 接口列表数据
  const apiList = ref([
    {
      id: 1,
      name: '用户数据同步',
      type: 'HTTP',
      status: 'active',
      lastRunTime: '2024-01-20 15:30:00'
    },
    {
      id: 2,
      name: '订单数据同步',
      type: 'Database',
      status: 'active',
      lastRunTime: '2024-01-20 15:25:00'
    }
  ])

  // 日志列表数据
  const logList = ref([
    {
      id: 1,
      apiName: '用户数据同步',
      status: '成功',
      startTime: '2024-01-20 15:30:00',
      duration: '5分钟',
      dataCount: '1000条'
    },
    {
      id: 2,
      apiName: '订单数据同步',
      status: '失败',
      startTime: '2024-01-20 15:25:00',
      duration: '3分钟',
      dataCount: '500条'
    }
  ])

  // 获取状态对应的标签类型
  const getStatusType = (status: string): 'success' | 'warning' | 'info' | 'danger' => {
    const statusMap: Record<string, 'success' | 'warning' | 'info' | 'danger'> = {
      成功: 'success',
      失败: 'danger',
      运行中: 'warning'
    }
    return statusMap[status] || 'info'
  }

  // 刷新接口列表
  const refreshApiList = () => {
    loading.api = true
    // TODO: 调用后端API获取最新接口数据
    setTimeout(() => {
      loading.api = false
      ElMessage.success('数据已更新')
    }, 1000)
  }

  // 刷新日志列表
  const refreshLogs = () => {
    loading.log = true
    // TODO: 调用后端API获取最新日志数据
    setTimeout(() => {
      loading.log = false
      ElMessage.success('数据已更新')
    }, 1000)
  }

  // 新增接口
  const handleAddApi = () => {
    router.push('/monitor/api-edit')
  }

  // 查看接口详情
  const handleViewDetail = (api: any) => {
    router.push(`/monitor/api-detail/${api.id}`)
  }

  // 立即执行接口
  const handleRunNow = (api: any) => {
    ElMessage.success(`立即执行接口：${api.name}`)
  }

  // 删除接口
  const handleDelete = (api: any) => {
    ElMessage.success(`删除接口：${api.name}`)
  }

  // 查看日志详情
  const handleViewLog = (log: any) => {
    router.push(`/monitor/log-detail/${log.id}`)
  }

  // 初始化
  onMounted(() => {
    refreshApiList()
    refreshLogs()
  })
</script>

<style scoped lang="scss">
  .data-integration {
    .api-status {
      :deep(.el-card__body) {
        padding: 0;
      }
    }
  }
</style>
